import React from 'react'
// ===================================================================== Temp
// ===================================================================== Declare
const { $Lazy, $fn } = window
// ===================================================================== Lazy
const Page 			= $Lazy.load(()=>import('#tp/page/page-container'))
const Tabs 			= $Lazy.load(()=>import('#tp/tabs/tabs'))
// ===================================================================== data
const saveName = 'area-summary'
// ===================================================================== component
class Index extends React.Component{
	state = {
		index: $fn.local(saveName) || 0,
		pages: [
			{ component:$Lazy.state(()=>import('./a')) },
			{ component:$Lazy.state(()=>import('./b')) },
		]
	}

	componentDidMount(){
		const { pages, index } = this.state
		pages[index].first = true
		this.setState({ pages })
	}
	
	tabs = [
		{ title:'区域汇总-明细', status:0 },
		{ title:'区域汇总-组合', status:1 }
	]
	
	render(){
		const { index, pages, controls } = this.state
		return (
			<Page>
				{/* 选项卡 */}
				<Tabs
					defaultActiveKey = { index }
					data		= { this.tabs }
					onTabs 		= { (data, index) => {
						const _index = +index
						pages[_index].first = true
						$fn.local(saveName, _index)
						this.setState({ index: _index, pages, controls: this['ref' + _index]?.controls?.() })
					}}
					controls	= { controls }
				/>
				
				{
					pages.map((v,i)=> v.first && (
                        <div className='ex rel fv' key={i} style={{ display: +index === i && v.first ? 'flex' : 'none' }}>
                            <v.component 
                                onRef   =   { ref => {
                                    this['ref' + i] = ref
                                }}
                                onKeyChange	= { () => {
                                    this.setState({ controls : this['ref' + index]?.controls?.() })
                                }}
                                {...this.props}
                            />
                        </div>
                    ))
				}
			</Page>
		)
	}
}

export default Index